<template>
    <div class="race-news">
        <div class="race-breadcrumb">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>赛事动态</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- <div class="search-box">
            <span class="title">动态搜索:</span>
            <div class="input-box">
                <input type="text" placeholder="请输入关键字" v-model="searchValue">
                <el-icon>
                    <Search />
                </el-icon>
            </div>
        </div> -->
        <div class="container">
            <div class="content">
                <RaceNewItem v-for="(item, index) in data" :key="index" :data="item"/>
            </div>
            <el-pagination :page-size="8" :current-page="currentPage" :total="total" @current-change="handleCurrentChange"/>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import RaceNewItem from './RaceNewItem.vue';
import { GetDynamics } from '@/api/front/contest';
// import { useRouter } from 'vue-router'
// const router = useRouter()
// const searchValue = ref('')
const newsData = ref([])
const data = ref([])
const total = ref(0)
const getNews = async () => {
    const res = await GetDynamics()
    console.log(res)
    total.value = res.data.length
    newsData.value = res.data
    data.value = newsData.value.slice(0, 8)
}
const currentPage = ref(1)
const handleCurrentChange = (val) => {
    currentPage.value = val
    data.value = newsData.value.slice((val - 1) * 8, val * 8)
}

onMounted(() => {
    getNews()
})

</script>
<style scoped lang="scss">
.race-news {
    width: 100%;
    height: 100%;
    padding: 0 100px;

    .race-breadcrumb {
        margin-top: 2%;
    }

    .search-box {
        box-shadow: var(--shadow-2);
        border-radius: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        margin: 10px;

        .title {
            font-weight: bold;
            margin-right: 10px;
        }

        .input-box {
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            box-sizing: border-box;

            input {
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                background-color: transparent;
            }

            .el-icon {
                width: 30px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                &:hover {
                    color: #42b983;
                }
            }

            button {
                width: 50px;
                height: 100%;
                border: none;
                outline: none;
                background-color: transparent;
                cursor: pointer;
            }

        }
    }

    .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .content {
            min-height: 600px;
        }
    }
}
</style>